<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>jQuery EasyUI</title>
 <link rel="stylesheet" type="text/css" href="./jquery-easyui-1.4.1/themes/default/easyui.css">
 <link rel="stylesheet" type="text/css" href="./jquery-easyui-1.4.1/themes/icon.css">
 <script type="text/javascript" src="./jquery-easyui-1.4.1/jquery.min.js"></script>
 <script type="text/javascript" src="./jquery-easyui-1.4.1/jquery.easyui.min.js"></script>
 <script>
  var products = [
      {productid:'FI-SW-01',name:'Koi'},
      {productid:'K9-DL-01',name:'Dalmation'},
      {productid:'RP-SN-01',name:'Rattlesnake'},
      {productid:'RP-LI-02',name:'Iguana'},
      {productid:'FL-DSH-01',name:'Manx'},
      {productid:'FL-DLH-02',name:'Persian'},
      {productid:'AV-CB-01',name:'Amazon Parrot'}
  ];
  function productFormatter(value){
   for(var i=0; i<products.length; i++){
    if (products[i].productid == value) return products[i].name;
   }
   return value;
  }

  function getSum()
  {
    alert(33);
  }  

  $(function () {
            var lastIndex;
            $('#tt').datagrid({
                url: 'webjson.ashx',
                title: 'Load Data ',
                iconCls: 'icon-save',
                singleSelect: true, 
                loadMsg: '数据加载中请稍后……',
                width: 600,
                height: 300,               
                columns: [[
                    { field: 'itemid', title: 'Item ID', width: 80 },
                    { field: 'productid', title: 'Product ID', width: 100 },
                    { field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: "numberbox" }, //增加可编辑
                    { field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: "numberbox" },//增加可编辑
                    { field: 'attr1', title: 'Attribute', width: 150, editor: "numberbox" },//这里虽为编辑类型，但是已经修改源码，成为不可以状态
                    { field: 'status', title: 'Status', width: 60, align: 'center' }
                ]],
                pageSize: 5,
                pageList:[5,10,20,30],
                 pagination: true,
                rownumbers: true ,
toolbar:[{
     text:'append',
     iconCls:'icon-add',
     handler:function(){
     $('#tt').datagrid('endEdit', lastIndex);
      $('#tt').datagrid('appendRow',{
       itemid:'',
       productid:'',
       listprice:'',
       unitprice:'',
       attr1:'',
       status:'P'
      });
      var lastIndex = $('#tt').datagrid('getRows').length-1;
      $('#tt').datagrid('beginEdit', lastIndex);
     }
    }],
                onClickRow: function (rowIndex) {
                    if (lastIndex != rowIndex) {
                        $('#tt').datagrid('endEdit', lastIndex);
                        $('#tt').datagrid('beginEdit', rowIndex);
                        setEditing(rowIndex);
   //$('#tt').datagrid('refreshRow',rowIndex);

                    }
                    lastIndex = rowIndex;
                }
              
            });
        });
    
    
    
//具体实现方法
        function setEditing(rowIndex) {
            var editors = $('#tt').datagrid('getEditors', rowIndex);
            var priceEditor = editors[0];
            var amountEditor = editors[1];
            var sumcount = editors[2];
            sumcount.target.bind('click', function () {
               
                var sum = priceEditor.target.val()+amountEditor.target.val();
                alert(sum);
                sumcount.target.val(sum);
 
            });
           
        }

 
 </script>
</head>
<body>
 <h1>Editable DataGrid</h1>
 
 <table id="tt" style="width:650px;height:auto"
   title="Editable DataGrid" iconCls="icon-edit" singleSelect="true">
 </table>
 
</body>
</html>